<!DOCTYPE html>
<html>
<head>
<script src="./js/plotly-latest.min.js"></script>
</head>
<body>
    <div id="demo"></div>
    <script>
        const xArray = [50,60,70,80,90,100,110,120,130,140,150];
        const yArray = [7,8,8,9,9,9,10,11,14,14,15]

        const data = [{
            x:xArray,
            y:yArray,
            mode:"markers",
            type:"scatter"
        }]

        const layout = {
            xaxis:{range:[40,160],title:"Square Meters"},
            yaxis:{range:[5,16],title:"Price in Millions"},
            title:"Hourse Prices vs. Size"
        };

        Plotly.newPlot("demo",data,layout);
    </script>
    <div id="demo1"></div>
    <script>
        const data1 = [{
            x:xArray,
            y:yArray,
            mode:"lines",
            type:"scatter"
        }]

        Plotly.newPlot("demo1",data1,layout);
    </script>

    <div id="demo2"></div>
    <script>
        let exp = "x+17";

        const xValues = [];
        const yValues = [];

        for(let x=0; x<=10; x+=1){
            yValues.push(eval(exp));
            xValues.push(x);
        }

        const data2 = [{
            x: xValues,
            y: yValues,
            mode:"lines"
        }];

        const layout2 = {title: "y = "+exp};

        Plotly.newPlot("demo2",data2,layout2);

    </script>

    <div id="demo3"></div>
    <script>
        let exp1 = "x";
        let exp2 = "1.5*x";
        let exp3 = "1.5*x + 7";

        const x1Values = [];
        const x2Values = [];
        const x3Values = [];
        const y1Values = [];
        const y2Values = [];
        const y3Values = [];

        for (let x = 0; x <= 10; x+= 1){
            x1Values.push(x);
            x2Values.push(x);
            x3Values.push(x);

            y1Values.push(eval(exp1))
            y2Values.push(eval(exp2))
            y3Values.push(eval(exp3))
        }

        const data3 = [
            {x:x1Values,y:y1Values,mode:"lines"},
            {x:x2Values,y:y2Values,mode:"lines"},
            {x:x3Values,y:y3Values,mode:"lines"},
        ]

        const layout3 = {title: "[y="+exp1+"][y="+exp2+"][y="+exp3+"]"}

        Plotly.newPlot("demo3",data3,layout3)
    </script>

    <div id="demo4"></div>
    <script>
        // const xArray4 = ["Italy","France","Spain","USA","Argentina"];
        // const yArray4 = [55,49,44,24,15];

        // const data4 = [
        //     {
        //         x:xArray4,
        //         y:yArray4,
        //         type:"bar"
        //     }
        // ];

        //horizontal
        const yArray4 = ["Italy","France","Spain","USA","Argentina"];
        const xArray4 = [55,49,44,24,15];

        const data4 = [
            {
                x:xArray4,
                y:yArray4,
                type:"bar",
                orientation:"h",
                marker:{color:'rgba(255,0,0,0.6)'}
            }
        ];

        const layout4 = {title:"World Wide Wine Production"};

        Plotly.newPlot("demo4",data4,layout4);
    </script>
    <div id="demo5" style="width: 100%;width: 700px;"></div>
    <script>
        const data5 = [
            {
                labels: yArray4,
                values: xArray4,
                // hole:.4,
                type:"pie"
            }
        ]
        Plotly.newPlot("demo5",data5,layout4);
    </script>

    <div id="demo6"></div>
    <script>
        let exp6 = 'Math.sin(x)'
        const xValues6 = [];
        const yValues6 = []
        for(let x = 0; x<=10; x+=0.1){
            const y = eval(exp6);
            yValues6.push(y);
            xValues6.push(x);
        }

        const data6 = [{x:xValues6,y:yValues6,mode:"lines"}]
        const layout6 = {title:"y = "+exp6};

        Plotly.newPlot("demo6",data6,layout6);
    </script>

    <div id="demo7"></div>
    <script>
        let exp7 = 'Math.cos(x)'
        const xValues7 = [];
        const yValues7 = []
        for(let x = 0; x<=10; x+=0.1){
            const y = eval(exp7);
            yValues7.push(y);
            xValues7.push(x);
        }

        const data7 = [{x:xValues7,y:yValues7,mode:"markers"}]
        const layout7 = {title:"y = "+exp7};

        Plotly.newPlot("demo7",data7,layout7);
    </script>

</body>
</html>